{include file="public/head"/}
<script language="javascript">
	$(document).ready(function () {

		//设置modal垂直居中,移动
		modalSetting(".modal"); 

		// datatimepicker 设置
		$('.form_datetime').datetimepicker({
			language: 'zh-CN', // en ,zh-CN, pt-BR
			minView: 'month',
			weekStart: 0, //一周从哪一天开始
			todayBtn:  1, //
			autoclose: 1,
			todayHighlight: 1,
			startView: 2,
			forceParse: 0,
			showMeridian: 1
		});
	});
</script>
<style type="text/css">
	.textarea{
	    /*width: 400px;*/
	    min-height: 20px;
	    max-height: 300px;
	    margin-right: auto;
	    padding: 3px;
	    outline: 0;
	    font-size: 12px;
	    line-height: 24px;
	    padding: 2px;
	    word-wrap: break-word;
	    overflow-x: hidden;
	    overflow-y: auto;
	 	white-space:pre-line;
	}
</style>
<div id="main">
<div class="container-fluid">
	<input type="hidden" id="id" value="{$id|default=0}">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="alert alert-dismissable alert-info">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                <h4> 信息框 </h4>
                * 合同在完成之前显示打印按钮，完成之后不显示<br>
				* 合同状态分为： 准备，已签约， 已送货，完成，4个状态<br>
				* 货柜状态字母分别为： R=READY准备， L=LOADING装入, S=SHIP开航, A=ARRIVAL到达, I=INSTORE入仓。<br>
				* 财务页，订单信息，费用第一行是货款信息，其他行是费用列表。<br>
            </div>
        </div>
    </div>
   
   
    <div class="ntDesktop">
    	<div class="ntDesktop-head">采购合同详情</div>
    
        <div class="row">
            <div class="col-md-9">
				<ul class="nav nav-tabs">
					<li class="active"><a href="#detail" data-toggle="tab">详情</a></li>
					<li @click="getPoFinance()"><a href="#finance" data-toggle="tab">财务</a></li>
					<li @click="getPoTerms()"><a href="#terms" data-toggle="tab">条款</a></li>
				</ul>
            </div>
			<div class="col-md-3 text-right">
				<a href="list" class="btn btn-default">
					<span class="fa fa-arrow-left"></span> 返回列表
				</a>
				<a :href="'/admin/buypo/print?request=view&id='+po_id" class='btn btn-sm btn-primary'><span class="fa fa-print"></span> 打印合同</a>
			</div>
        </div>
    	
		<div class="tab-content" style="padding-top:1rem">
			<!-- 合同详情TAB -->
			<div class="row tab-pane active" id="detail">
				<div class="col-md-4">
					<!-- 订单内容 -->
					<div class="panel panel-default">
						<div class="panel-heading">订单内容</div>
						<table class="table table-hover">
							<tbody>
								<tr>
									<td>合同号</td>
									<td>{{formatUnit(listData.id,'id')}}</td>
								</tr>
								<tr>
									<td>交货时间</td>
									<td>{{listData.delivery_day}}</td>
								</tr>
								<tr>
									<td>状态</td>
									<td>{{listData.status_name}}</td>
								</tr>
								<tr>
									<td>交货地址</td>
									<td>{{listData.port_name}}</td>
								</tr>
								<tr>
									<td>供应商</td>
									<td>{{listData.company_name}}</td>
								</tr>
								<tr>
									<td>联系人</td>
									<td>{{listData.linkname + ' / ' + listData.linkman_method}}</td>
								</tr>
								<tr>
									<td>创建</td>
									<td>{{listData.create_name + ' / ' + listData.create_time}}</td>
								</tr>
								<tr>
									<td>编辑</td>
									<td>{{listData.update_name ? listData.update_name  + ' / ' + listData.update_time : '-'}}</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<div class="col-md-8">
					
					<!-- 订购内容 -->
					<div class="panel panel-default">
						<div class="panel-heading">订购内容</div>
						<table class="table table-hover table-striped">
							<thead>
								<tr>
									<th>No.</th>
									<th>产品</th>
									<th>箱规</th>
									<th>数量</th>
									<th>金额</th>
								</tr>
							</thead>
							<tbody>
								<tr v-for="(buy_planItem,buy_planIndex) in listData.buy_plan">
									<td>{{formatUnit(buy_planItem.id,'id')}}</td>
									<td>
										<div class="pro">
											<div class="pro-icon"><img :src="buy_planItem.img_url" border="0" width="48px" height="48px" alt="ICON"></div>
											<div class="pro-name">
												<small>{{ formatUnit(buy_planItem.prochar_id,'id') + (buy_planItem.brand_name ? ' / ' + buy_planItem.brand_name : '') + (buy_planItem.model ? ' / ' + buy_planItem.model : '') }}</small> <br />{{buy_planItem.pro_name}}
											</div>
										</div>
									</td>
									<td align="right">
										{{formatUnit(buy_planItem.ctn_qty,'CTN')}}<small class="unit">PCS/CTN</small> / 
										{{formatUnit(buy_planItem.ctn_kgs,'KGS')}}<small class="unit">KGS/CTN</small><br>
										{{buy_planItem.ctn_size}}<small class="unit">CM</small> / 
										{{formatUnit(buy_planItem.ctn_m3,'M3')}}<small class="unit">CBM/CTN</small>
									</td>
									<td align="right">
										{{formatUnit(buy_planItem.qty,'CTN')}}<small class="unit">CTN</small><br>
										{{formatUnit((buy_planItem.qty*buy_planItem.ctn_qty),'PCS')}}<small class="unit">PCS</small>
									</td>
									<td align="right">
										{{formatUnit(buy_planItem.price,'$')}}<small class="unit">CNY</small><br>
										{{formatUnit(buy_planItem.price_sum,'$')}}<small class="unit">CNY</small>
									</td>
								</tr>
							</tbody>
							<tfoot>
								<tr>
									<td align="right" colspan="6">
										合计 : {{formatUnit(listData.kgs_sum,'KG')}} <small class="unit">KGS</small> /
										{{formatUnit(listData.m3_sum,'M3')}} <small class="unit">CBM</small> /
										{{formatUnit(listData.price_sum,'$')}} <small class="unit">CNY</small>
									</td>
								</tr>
							</tfoot>
						</table>
					</div>
					
					<!-- 装箱内容 -->
					<div class="panel panel-default">
						<div class="panel-heading">装箱内容</div>
						<table class="table table-hover table-striped">
							<thead>
								<tr>
									<th class="text-center">#</th>
									<th>产品</th>
									<th>箱规</th>
									<th>数量</th>
									<th>合计</th>
									<th>货柜</th>
								</tr>
							</thead>
							<tbody>
								<tr v-for="(buy_po_packItem,buy_po_packIndex) in listData.buy_po_pack">
									<td align="center">{{buy_po_packIndex+1}}</td>
									<td>
										<div class="pro">
											<div class="pro-icon"><img :src="buy_po_packItem.img_url" border="0" width="48px" height="48px" alt="ICON"></div>
											<div class="pro-name">
												<small>{{ formatUnit(buy_po_packItem.prochar_id,'id') + (buy_po_packItem.brand_name ? ' / ' + buy_po_packItem.brand_name : '') + (buy_po_packItem.model ? ' / ' + buy_po_packItem.model : '') }}</small> <br />{{buy_po_packItem.pro_name}}
											</div>
										</div>
									</td>

									<td align="right">
										{{formatUnit(buy_po_packItem.ctn_qty,'CTN')}}<small class="unit">PCS/CTN</small> / 
										{{formatUnit(buy_po_packItem.ctn_kgs,'KGS')}}<small class="unit">KGS/CTN</small><br>
										{{buy_po_packItem.ctn_size}}<small class="unit">CM</small> / 
										{{formatUnit(buy_po_packItem.ctn_m3,'CTN')}}<small class="unit">CBM/CTN</small>
									</td>
									<td align="right">
										{{formatUnit(buy_po_packItem.qty,'CTN')}}<small class="unit">CTN</small><br>
										{{formatUnit((buy_po_packItem.qty*buy_po_packItem.ctn_qty),'PCS')}}<small class="unit">PCS</small>
									</td>
									<td align="right">
										{{formatUnit(buy_po_packItem.kgs_sum,'KGS')}}<small class="unit">KGS</small><br>
										{{formatUnit(buy_po_packItem.m3_sum,'M3')}}<small class="unit">CBM</small>
									</td>

									<td>
										{{ buy_po_packItem.container_id ? formatUnit(buy_po_packItem.container_id,'id') : '-'}}<br>
										{{buy_po_packItem.name ? buy_po_packItem.name + "(" +buy_po_packItem.container_status +")" : '-' }}
									</td>
								</tr>
							</tbody>
							<tfoot>
								<tr>
									<td align="right" colspan="6">
										合计 : {{formatUnit(listData.qty_sum,'KG')}} <small class="unit">CTN</small> / 
										{{formatUnit(listData.kgs_sum,'KG')}} <small class="unit">KGS</small> /
										{{formatUnit(listData.m3_sum,'M3')}} <small class="unit">CBM</small> 
									</td>
								</tr>
							</tfoot>
						</table>
					</div>
				</div>
			</div>
			
			<!-- 财务TAB -->
			<div class="row tab-pane" id="finance">
				<div class="col-md-4">
					<div class="panel panel-default">
						<div class="panel-heading">订单信息</div>
						<table class="table table-hover">
							<tbody>
								<tr>
									<td>合同号</td>
									<td>{{ formatUnit(po_id,'id') }}</td>
								</tr>
								<tr>
									<td>付款账号</td>
									<td>
										{{finance.bank.bankname}} / 
										{{finance.bank.name}} <br>
										{{finance.bank.account_name}} / 
										{{finance.bank.account_num}}
									</td>
								</tr>
							</tbody>
						</table>
						<table class="table table-striped table-hover">
							<thead>
								<tr>
									<th class="text-center">#</th>
									<th>支付内容</th>
									<th>金额</th>
									<th>分摊</th>
									<th>代付</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td align="center">1</td>
									<td>货款</td>
									<td align="right">{{formatUnit(listData.price_sum,'$')}}<small class="unit">CNY</small></td>
									<td align="center">-</td>
									<td align="center">-</td>
								</tr>
								<tr v-for="(paycontentItem,paycontentIndex) in finance.paycontent">
									<td align="center">{{paycontentIndex + 2}}</td>
									<td>{{paycontentItem.remarks}}</td>
									<td align="right">{{formatUnit(paycontentItem.amount,'$')}}<small class="unit">CNY</small></td>
									<td align="center">{{paycontentItem.apportion == 0 ? '-' : 'O'}}</td>
									<td align="center">{{paycontentItem.is_replace_pay == 0 ? '-' : 'O'}}</td>
								</tr>
							</tbody>
							<tfoot>
								<tr>
									<td colspan="5" align="right">
										合计： {{ formatUnit((listData.price_sum + listData.cost_sum),'$')}}<small class="unit">CNY</small>
									</td>
								</tr>
							</tfoot>
						</table>
					</div>
					<div class="panel panel-default">
						<div class="panel-heading">付款安排</div>
						<table class="table table-striped table-hover">
							<thead>
								<tr>
									<th class="text-center">#</th>
									<th>付款日期</th>
									<th>金额</th>
									<th>百份比</th>
								</tr>
							</thead>
							<tbody>
								<tr v-for="(payplanItem,payplanIndex) in finance.payplan">
									<td align="center">{{payplanIndex +1}}</td>
									<td>{{payplanItem.pay_time}}</td>
									<td align="right">
										{{formatUnit(payplanItem.amount,'$')}}<small class="unit">CNY</small>
									</td>
									<td align="right">
										{{payplanItem.percent}}<small class="unit">%</small>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<div class="col-md-8">
					<div class="panel panel-default">
						<div class="panel-heading">付款记录</div>
						<table class="table table-striped table-hover">
							<thead>
								<tr>
									<th class="text-center">#</th>
									<th>付款日期</th>
									<th>付款账号</th>
									<th>金额</th>
									<th>收款账号</th>
									<th>备注</th>
									<td>创建</td>
								</tr>
							</thead>
							<tbody>
								<template  v-if="finance.payRecord.length > 0">
								<tr v-for="(payRecordItem,payRecordIndex) in finance.payRecord">
									<td align="center">{{payRecordIndex+1}}</td>
									<td>{{payRecordItem.happen_time}}</td>
									<td>
										{{payRecordItem.bank_name_}} / 
										{{payRecordItem.bankname_}} <br>
										{{payRecordItem.account_name_}} / 
										{{payRecordItem.account_num_}}
									</td>
									<td align="right">
										{{formatUnit(payRecordItem.amount,'$')}}<small class="unit">CNY</small><br>
										{{ formatUnit(Math.round(payRecordItem.amount/(listData.price_sum+listData.cost_sum)*1000)/100,'%') }}<small class="unit">%</small>
									</td>
									<td>
										{{payRecordItem.bank_name}} / 
										{{payRecordItem.bankname}} <br>
										{{payRecordItem.account_name}} / 
										{{payRecordItem.account_num}}
									</td>
									<td>
										<button class="btn btn-sm btn-default" data-toggle="popover" title="备注"  @mouseover="setpopper">
											备注
											<div class="content"  style="display: none;">
												<div style="width:30vw">
													<span>{{payRecordItem.remarks}}</span>
												</div>
											</div>
										</button>
									</td>
									<td>
										{{payRecordItem.create_name}}<br>
										{{payRecordItem.create_time}}
									</td>
								</tr>
								</template>
								<template v-else>
									<tr style="text-align: center;" >
				                        <td colspan="7" class="no_date">{:strtoupper(lang('no_data'))}</td>
				                    </tr>
				                </template>
							</tbody>
						</table>
					</div>
				</div>
			</div>
			
			<!-- 条款TAB -->
			<div class="row tab-pane" id="terms">
				<div class="col-md-12">
					<div class="panel panel-default">
						<div class="panel-heading">合同条款</div>
						<table class="table table-striped">
							<tbody>
								<template v-for="(termsItem,termsIndex) in terms">
									<tr>
										<td>{{termsItem.terms_type_name}}</td>
									</tr>
									<tr>
										<td>
											<div class="textarea">{{termsItem.content}}</div>
										</td>
									</tr>	
								</template>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
    </div>

</div>
</div>

<script src="/static/Admin/js/buypodetail.js"></script>
{include file="public/foot"/}